<template>
	<div class="GoodEvaluation">
		<ul>
			<li v-for="item in good.list">
				<div class="userInfo">
					<h3>{{item.user}}</h3>
					<span>{{item.time}}</span>
				</div>
				<div class="pro_img">
					<img :src="item.img" />
				</div>
				<div class="info">
					<p>{{item.comment}}</p>
				</div>
				<div class="tips">
					<p>{{item.tip}}</p>
				</div>
			</li>
		
		</ul>
	</div>
</template>

<script>
	export default{
		name:"GoodEvaluation",
		data(){
			return{
				good:{}
			}
		},
		mounted(){
			this.$http.get('/api/Details.json')
			.then((res)=>{
				let data=res.data
				this.good=data.Wom.good
			})
		}
	}
</script>

<style lang="scss" scoped>
.GoodEvaluation{
	width: 100%;
	padding-bottom: 101px;
	ul{
		width: 100%;
		li{
			border-top: 1px solid #dddddd;
			padding:0 28px;
			box-sizing: border-box;
			width: 100%;
			.userInfo{
				height: 62px;
				display: flex;
				justify-content: space-between;
				align-items:center;
				height:62px;
				
				h3{
					
					color: #ff9900;
					font-size:23.96px;
				}
				span{
					color:#999999;
					font-size: 17.97px;
				}
			}
			.pro_img{
				width: 150px;
				height:150px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				p{
					padding: 8px 0;
					color:#999999;
					font-size: 19.97px;
				}
			}
			.tips{
				margin-bottom: 20px;
				p{
					border-radius: 9px;
					width: 100%;
					box-sizing: border-box;
					padding: 16px 10px;
					background:#dddddd;
					color:#666666;
									
				}
			}
			
		}
	}
	
}
</style>